<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="../css/style2.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="../js/indexjs.js"></script>
</head>
<body>
<div class="headBarContainer">
    <div class="itemsContainer">
        <nav>
            <ul>
                <li class="headItem"id="clicked"><a href="/index/">首页</a></li>
                <li class="headItem"><a href="/index/products">分类</a></li>
                <li class="headItem"><a href="/index/my">我的</a>
            </ul>
        </nav>
    </div>
    <div th:if="${session.userId}!=null" class="logButton" id="logIn">
        <a href="/user/exit">
            <div>退出</div>
        </a>
    </div>
    <div th:if="${session.userId}==null" class="logButton" id="logIn">
        <a href="/index/login">
            <div>登录</div>
        </a>
    </div>
    <div th:if="${session.userId}==null" class="logButton" id="signIn">
        <a href="/index/login">
            <div>注册</div>
        </a>
    </div>

</div>

<div class="adArea">
    <div class="pictureContainer">
        <img src="../images/ad3.jpg"/> <a href="#" id="pre"><img
            src="../images/left.png"></a> <a href="#" id="next"><img
            src="../images/right.png"></a>
        <div class="tabBar">
            <a href="#"><img src="../images/circle.png"></img> <a href="#"><img
                    src="../images/circle.png"></a> <a href="#"><img
                    src="../images/circle.png"></a> <a href="#"><img
                    src="../images/circle.png"></a>
            </a>
        </div>
    </div>
    <div class="adRightContainer">
        <div id="adTopRight">
            <table>
                <tr>
                    <td><img src="../images/moneypackage.png"></td>
                    <td><img src="../images/lock.png"></td>
                    <td><img src="../images/money.png"></td>
                </tr>
                <tr>
                    <td>交易保障</td>
                    <td>信息安全</td>
                    <td>低佣金</td>
                </tr>
            </table>
        </div>
        <div id="adBottomRight">
            <table>
                <tr>
                    <td id="title">帮助中心</td>
                    <td id="more"><a href="#">更多></a></td>
                </tr>
                <tr>
                    <td><a href="#">
                        <text class="sqr">&nbsp交保&nbsp</text>
                        <text>交保限额</text>
                    </a>
                    </td>
                    <td><a href="#">
                        <text class="sqr">&nbsp出价&nbsp</text>
                        <text>出价规则</text>
                    </a>
                    </td>
                </tr>
                <tr>
                    <td><a href="#">
                        <text class="sqr">&nbsp退回&nbsp</text>
                        <text>退回保证金</text>
                    </a>
                    </td>
                    <td><a href="#">
                        <text class="sqr">&nbsp交割&nbsp</text>
                        <text>售后交割</text>
                    </a>
                    </td>
                </tr>
                <tr>
                    <td><a href="#">
                        <text class="sqr">&nbsp贷款&nbsp</text>
                        <text>金融贷款</text>
                    </a>
                    </td>
                    <td><a href="#">
                        <text class="sqr">&nbsp过户&nbsp</text>
                        <text>如何过户</text>
                    </a>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" class="span"><a href="#">
                        <div id="model">
                            <img src="../images/game.png" height="20px">
                            <text>模拟体验拍卖</text>
                        </div>
                    </a></td>
                </tr>
                <tr>
                    <td colspan="2" class="span">
                        <text>客服专线 400-123-1234</text>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>

<div class="flowArea">
    <div>
        <img src="../images/liucheng.png">
    </div>
</div>

<div class="shopAndNote">
    <div class="shopArea">
        <div class="body">
            <ul>
                <li th:each="pi : ${productList}">
                    <div class="shop" th:id="${pi.auctionType}eq'1'?'now':'later'">
                        <div class="picContainer">
                            <img th:src="${pi.productPhotos}">
                        </div>
                        <div class="shopName">
                            <label th:text="${pi.productName}">
                            </label>
                        </div>
                        <div>
                            <label>当前价:</label><label th:text="'￥'+${pi.nowPrice}" class="price">
                        </label>
                        </div>
                        <div th:if="${pi.auctionType}eq'1'">
                            <label>预计于&nbsp&nbsp&nbsp&nbsp</label>
                            <label th:text="${#dates.format(pi.endTime,'MM-dd HH:mm')}" class="endTime">
                            </label>
                            <label>&nbsp&nbsp&nbsp结束</label>
                        </div>
                        <div th:unless="${pi.auctionType}eq'1'">
                            <label>将&nbsp&nbsp&nbsp于&nbsp&nbsp&nbsp&nbsp</label>
                            <label th:text="${#dates.format(pi.startTime,'MM-dd HH:mm')}" class="startTime">
                            </label>
                            <label>&nbsp&nbsp&nbsp开始</label>
                        </div>
                        <div>
                            <label>底&nbsp&nbsp&nbsp价&nbsp</label><label th:text="'￥'+${pi.floorPrice}" class="startPrice">
                        </label>
                        </div>
                        <a th:href="@{/product/{proId}(proId=${pi.productId})}">
                            <div class="button">
                                <text>报名参与</text>
                            </div>
                        </a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="noteArea">
        <div class="note">
            <div class="head">
                <text id="title">公告栏</text>
                <text id="more"><a href="#">更多></a></text>
            </div>
            <ul>
                <li th:each="notice,status: ${noticeList}">
                    <a href="#">公告 <text th:text="${status.index}+1"></text></a>
                    <text th:text="${#dates.format(notice.pubTime,'MM-dd HH:mm:ss')}">|
                    </text>
                    <div>
                        <text th:text="${notice.noticeCon}">
                        </text>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>
<!--即将开始-->
<div class="newShop">
    <div class="shopArea">
        <div class="head">
            <text class="date">即将</text>
            <text class="title">开拍</text>
            <text class="person">123人报名</text>
        </div>
        <div class="body">
            <ul>
                <li th:each="pi : ${laterProductList}">
                    <div class="shop" th:id="${pi.auctionType}eq'1'?'now':'later'">
                        <div class="picContainer">
                            <img th:src="${pi.productPhotos}">
                        </div>
                        <div class="shopName">
                            <label th:text="${pi.productName}">
                            </label>
                        </div>
                        <div>
                            <label>当前价:</label><label th:text="'￥'+${pi.nowPrice}" class="price">
                        </label>
                        </div>
                        <div th:if="${pi.auctionType}eq'1'">
                            <label>预计于&nbsp&nbsp&nbsp&nbsp</label>
                            <label th:text="${#dates.format(pi.endTime,'MM-dd HH:mm')}" class="endTime">
                            </label>
                            <label>&nbsp&nbsp&nbsp结束</label>
                        </div>
                        <div th:unless="${pi.auctionType}eq'1'">
                            <label>将&nbsp&nbsp&nbsp于&nbsp&nbsp&nbsp&nbsp</label>
                            <label th:text="${#dates.format(pi.startTime,'MM-dd HH:mm')}" class="startTime">
                            </label>
                            <label>&nbsp&nbsp&nbsp开始</label>
                        </div>
                        <div>
                            <label>底&nbsp&nbsp&nbsp价&nbsp</label><label th:text="'￥'+${pi.floorPrice}" class="startPrice">
                        </label>
                        </div>
                        <a th:href="@{/product/{proId}(proId=${pi.productId})}">
                            <div class="button">
                                <text>报名参与</text>
                            </div>
                        </a>
                    </div>
                </li>
                <li>
                    <div class="shop" id="more">
                        <div class="picContainer">
                            <img src="images/ques2.png">
                        </div>
                        <a href="enterSeachJsp.action">
                            <div class="button">
                                <text>查看更多</text>
                            </div>
                        </a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>